<template>
  <div class="page-list-live">
    <PageList>
      <template #header>系统参数设置</template>
      <template #tab>
        <el-form ref="RefForm" :model="formData" :rules="formRules" label-width="240px" status-icon>
          <el-form-item label="考勤方式" prop="attendanceType">
            <el-select v-model="formData.attendanceType" style="width: 200px" placeholder="请选择">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="最大停留时间(分)" prop="validStayMinutes">
            <div class="tdDiv">
              <div class="inputDiv">
                <el-input v-model="formData.validStayMinutes"></el-input>
              </div>
              <div class="fonts">说明：如果卡超出设定时间，则认为卡已离开，自动设置离开时间</div>
            </div>
          </el-form-item>
          <el-form-item label="忽略记录时间(秒)" prop="ignoreMinutes">
            <div class="tdDiv">
              <div class="inputDiv">
                <el-input-number v-model="formData.ignoreMinutes" min="10"></el-input-number>
              </div>
              <div class="fonts">说明：出隧道时判断进入隧道的时间，如果在设置的忽略范围内，则该次出的记录被忽略，并不记录考勤，默认30秒，最小10秒</div>
            </div>
          </el-form-item>

          <el-form-item label="数据超期自动清理（天）" prop="autoDeleteDays">
            <div class="tdDiv">
              <div class="inputDiv">
                <el-input-number v-model="formData.autoDeleteDays"></el-input-number>
              </div>
              <div class="fonts">说明：超过设置天数值后，历史隧道进出场记录，洞内历史轨迹，历史报警消息将被删除。<span>0 为不清理</span></div>
            </div>
          </el-form-item>
          <el-form-item>
            <el-button :loading="loading" type="primary" @click="handleSubmit">保存</el-button>
          </el-form-item>
        </el-form>
      </template>
    </PageList>
  </div>
</template>
<script>
import listMixin from '@/mixins/list'
import { attendance } from '@/api/api'
import { eleValidator } from '@/utils/tools'
export default {
  mixins: [listMixin],

  data() {
    return {
      loading: false,
      options: [{ label: '门禁 + 基站', value: 3 }],
      formData: {
        autoDeleteDays: null, // 数据超期自动清理（天）
        attendanceType: 3, // 考勤方式
        ignoreMinutes: 30, // 忽略记录时间
        befour: '20', // 计算考勤前多少时间
        validFrequencyMinutes: '5', // 有效进出时间频率间隔
        validStayMinutes: '10', // 有效时间
        validCounting: '2', // 有效考勤记录条数
        ignoreAlertMessageSeconds: 5
      },
      formRules: {
        attendanceType: [{ required: true, message: '请选择考勤方式', trigger: 'change' }],
        ignoreMinutes: [
          { required: true, message: '请输入忽略记录时间', trigger: 'blur' },
          {
            validator: eleValidator([
              { rule: 'isEmpty', msg: '忽略记录时间不能为空' },
              { rule: 'isNumber', msg: '只能输入数字' }
            ]),
            trigger: 'blur'
          }
        ],
        befour: [
          { required: true, message: '请输入计算考勤前时间', trigger: 'blur' },
          {
            validator: eleValidator([
              { rule: 'isEmpty', msg: '忽略计算考勤前时间不能为空' },
              { rule: 'isNumber', msg: '只能输入数字' }
            ]),
            trigger: 'blur'
          }
        ],
        validFrequencyMinutes: [
          { required: true, message: '请输入有效进出时间频率间隔', trigger: 'blur' },
          {
            validator: eleValidator([
              { rule: 'isEmpty', msg: '有效进出时间频率间隔不能为空' },
              { rule: 'isNumber', msg: '只能输入数字' }
            ]),
            trigger: 'blur'
          }
        ],
        validStayMinutes: [
          { required: true, message: '请输入有效时间', trigger: 'blur' },
          {
            validator: eleValidator([
              { rule: 'isEmpty', msg: '有效时间不能为空' },
              { rule: 'isNumber', msg: '只能输入数字' }
            ]),
            trigger: 'blur'
          }
        ],

        validCounting: [
          { required: true, message: '请输入有效考勤记录条数', trigger: 'blur' },
          {
            validator: eleValidator([
              { rule: 'isEmpty', msg: '有效考勤记录条数不能为空' },
              { rule: 'isNumber', msg: '只能输入数字' }
            ]),
            trigger: 'blur'
          }
        ]
      },
      id: null,
      // 是否有默认数据
      isDefault: false
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    // 保存
    async handleSubmit() {
      this.$refs['RefForm'].validate(async valid => {
        if (valid) {
          this.loading = true
          let response = null
          for (let key in this.formData) {
            if (key === 'validStayMinutes' || key === 'ignoreMinutes' || key === 'autoDeleteDays') {
              if (this.formData[key]) {
                this.formData[key] = parseFloat(this.formData[key])
              }
            }
          }
          try {
            if (this.isDefault) {
              response = await attendance('put', { id: this.id, value: this.formData })
            } else {
              response = await attendance('post', this.formData)
              this.getData()
            }
            this.$message.success('保存成功！')
          } catch (err) {
            this.$message.error('保存失败！')
          }
          this.loading = false
        } else {
          this.loading = false
          return false
        }
      })
    },
    // 查询
    async getData() {
      try {
        let response = await attendance('get', null)
        this.isDefault = true
        let data = response.data
        this.id = data.id
        this.formData = {
          autoDeleteDays: data.autoDeleteDays,
          attendanceType: data.attendanceType, // 考勤方式
          ignoreMinutes: data.ignoreMinutes, // 忽略记录时间
          befour: data.befour, // 计算考勤前多少时间
          validFrequencyMinutes: data.validFrequencyMinutes, // 有效进出时间频率间隔
          validStayMinutes: data.validStayMinutes, // 有效时间
          validCounting: data.validCounting // 有效考勤记录条数
        }
      } catch (err) {
        this.isDefault = false
      }
    }
  }
}
</script>
<style lang="scss" scoped>
  .tdDiv {
    display: flex;
    .inputDiv {
      width: 200px;
    }
    .fonts {
      color: #999;
      flex: 1;
      line-height: 20px;
      margin-left: 10px;
      font-size: 12px;
      display: flex;
      align-items: center;
    }
  }
</style>
